import React, { Component } from 'react'
import { Icon } from 'antd'

export default class Homepage extends Component {
  constructor() {
    super()
    this.renderNav = this.renderNav.bind(this)
    this.renderGoods = this.renderGoods.bind(this)
    this.renderChartType = this.renderChartType.bind(this)
    this.state = {
      navIndex: 0,
      activeGoodsIndex: 0,
      chartTypeIndex: 0,
    }
  }
  render() {
    return (
      <div className={`rt-homepage-container cm-column-flex-box`}>
        <div className={`rt-top-box`}>
          <div className={`rt-wrapper`}>
            <img alt="logo" src={require('static/images/logo.png')} />
            <div className={`rt-nav-box`}>
              {['交易', '财经', '排行', '帮助', '账户'].map(this.renderNav)}
            </div>
          </div>
        </div>
        <div className={`cm-scrollable-container`}>
          <div className={`rt-wrapper`}>
            <div className={`rt-left`}>
              <div className={`rt-user-box`}>
                <div className={`rt-lft`}>
                  <img alt="avatar" src={require('static/images/avatar.png')} />
                  <div>
                    <div className={`rt-above`}>
                      <span>130****7893</span>
                      <img alt="auth" src={require('static/images/authed.png')} />
                    </div>
                    <span className={`rt-balance`}>余额：3,686.90元</span>
                  </div>
                </div>
                <div className={`rt-rgt`}>
                  <Icon type="user" />
                  <span>退出</span>
                </div>
              </div>

              {/*<div className={`rt-goods-box`}>
                <div className={`rt-left-side`}>
                  <span className={`rt-name`}>工业银</span>
                  <div>
                    <span>3503.00</span>
                  </div>
                  <span>最低 3479</span>
                </div>
                <div className={`rt-right-side`}>
                  <span>+21.4</span>
                  <div>
                    <Icon type="up" />
                  </div>
                  <span>最高 3520</span>
                </div>
              </div>*/}

              {
                [{name: '工业银'}, {name: '工业油'}].map(this.renderGoods)
              }
            </div>
            <div className={`rt-right`}>
              <div className={`rt-top-box`}>
                <div className={`rt-left-side`}>
                  <span className={`rt-name`}>工业银</span>
                  <Icon type="up" />
                  <span>3130.03</span>
                </div>
                <div className={`rt-right-side`}>
                  {['分时线', '5分钟线', '30分钟线', '1小时线', '日线'].map(this.renderChartType)}
                </div>
              </div>
              <div className={`rt-chart-operate-box`}>
                <div className={`rt-left-side`}>
                  <Icon type="question" />
                  <Icon type="question" />
                  <Icon type="question" />
                  <Icon type="question" />
                  <Icon type="question" />
                </div>
                <div className={`rt-right-side`}>
                  <span>最高：3520</span>
                  <span>最低：3479</span>
                  <span>昨收：3491</span>
                  <span>开盘：3499</span>
                </div>
              </div>
              <div className={`rt-chart-box`}>
                <img alt="chart" />
              </div>
              <div className={`rt-title`}>
                微盘交易
              </div>

              <div className={`rt-double-separator-box`}></div>

              {
                Array(3).fill(3).map(v => (
                  <div key={Math.random()} className={`rt-deal-operate-box`}>
                    <div className={`rt-goods`}>
                      <span className={`rt-name`}>0.1KG 白银</span>
                      <span>8元/手</span>
                      <span>波动盈亏0.1元</span>
                    </div>
                    <div className={`rt-stepper-box`}>
                      <div className={`rt-amount`}>
                        <span>手数</span>
                        <div className={`rt-stepper`}>
                          <span>-10</span>
                          <span>-5</span>
                          <span>-</span>
                          <div><span>10</span></div>
                          <span className={`rt-active`}>+</span>
                          <span>+5</span>
                          <span>+10</span>
                        </div>
                      </div>
                      <div className={`rt-profit-loss`}>
                        <div className={`rt-profit-box`}>
                          <div>
                            <input type="checkbox" />
                            <span>止盈</span>
                          </div>
                          <div className={`rt-up-down`}>
                            <div className={`rt-display-box`}>不设</div>
                            <div>
                              <Icon type="caret-up" />
                              <Icon type="caret-down" />
                            </div>
                          </div>
                        </div>

                        <div className={`rt-loss-box`}>
                          <div>
                            <input type="checkbox" />
                            <span>止损</span>
                          </div>
                          <div className={`rt-up-down`}>
                            <div className={`rt-display-box`}>不设</div>
                            <div>
                              <Icon type="caret-up" />
                              <Icon type="caret-down" />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className={`rt-check-box`}>
                      <div className={`rt-cost`}>开仓成本：<span>72</span>元</div>
                      <div className={`rt-middle-box`}>
                        <div className={`rt-lft`}>
                          <input type="checkbox" />
                          <span>按实时价格成交</span>
                        </div>

                        <div className={`rt-rgt`}>
                          <span>按实时价格成交</span>
                        </div>
                      </div>

                      <div className={`rt-bottom-box`}>
                        <input type="checkbox" />
                        <span>持仓过夜(递延费:1元/KG*天)</span>
                      </div>
                    </div>
                    <div className={`rt-operate-box`}>
                      <div>买 涨</div>
                      <div>买 跌</div>
                    </div>
                  </div>
                ))
              }
            </div>
          </div>
        </div>
        <div className={`rt-footer-box`}>© 2016 金欢信息 版权所有</div>
      </div>
    )
  }
  renderNav(v, i) {
    const { navIndex } = this.state
    return (
      <div
        key={i}
        className={`${ navIndex ===i ? 'rt-active' : ''}`}
        onClick={() => {
          if (navIndex === i) return
          this.setState({navIndex: i})
        }}
      >
        <Icon type="question" />
        <span>{v}</span>
      </div>
    )
  }
  renderGoods(v, i) {
    const { activeGoodsIndex } = this.state
    return (
      <div
        key={i}
        className={`rt-goods-box ${activeGoodsIndex === i ? 'rt-active' : ''}`}
        onClick={() => {
          if (activeGoodsIndex === i) return
          this.setState({activeGoodsIndex: i})
        }}
      >
        <div className={`rt-top-level`}>
          <span>{v.name}</span>
          <span>+21.4</span>
        </div>
        <div className={`rt-middle-level`}>
          <span>3503.00</span>
          <Icon type="up" />
        </div>
        <div className={`rt-bottom-level`}>
          <span>最低 3479</span>
          <span>最高 3520</span>
        </div>
      </div>
    )
  }
  renderChartType(v, i) {
    const { chartTypeIndex } = this.state
    return (
      <span
        key={i}
        className={`${chartTypeIndex === i ? 'rt-active' : ''}`}
        onClick={() => {
          if (chartTypeIndex === i) return
          this.setState({chartTypeIndex: i})
        }}
      >
        {v}
      </span>
    )
  }
}